<template>
    <div>
        <template>
            <div class="logo-wrapper fl">
                <img src="https://dummyimage.com/100x60/fa0505&text=#0011ff" alt="">
            </div>
        </template>
        <!-- TODO 添加循环渲染 Navlist 数据  -->
        <!-- <template v-for= "item in Navlist"> -->
        <template>
            <router-link to="/">
                <el-menu-item index="1">我的工作台</el-menu-item>
            </router-link>
            <router-link to="/">
                <el-menu-item index="2">项目中心</el-menu-item>
            </router-link>
            <router-link to="/">
                <el-menu-item index="3">项目中心</el-menu-item>
            </router-link>
            <router-link to="/">
                <el-menu-item index="4">项目中心</el-menu-item>
            </router-link>

        </template>
        <template>
            <div class="navbar-right">
                <div class="notice-wrapper item">
                    <router-link to="/">
                        <i class="el-icon-message"></i>
                        <span class="bubble">1</span>
                    </router-link>
                </div>
                <div class="notice-wrapper item">
                    <router-link to="/">
                        <i class="el-icon-information"></i>
                        <span class="bubble">1</span>
                    </router-link>
                </div>
                <el-dropdown class="avatar-wrapper item" trigger="click">
                    <div class="">
                        <img class="user-avatar" src="https://dummyimage.com/60x60/fa0505&text=#0011ff">
                        <i class="el-icon-caret-bottom"></i>
                    </div>
                    <el-dropdown-menu class="user-dropdown">
                        <router-link to="/">
                            <el-dropdown-item>
                                Home
                            </el-dropdown-item>
                        </router-link>
                        <el-dropdown-item divided><span style="display:block;">LogOut</span></el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </template>
    </div>
</template>

<script>
    export default {
        name: 'NavbarItem',
        props: {
            Navlist: {
                type: Array
            }
        }
    }

</script>

<style scoped>
    .logo-wrapper {
        width: 300px;
    }

    .navbar {
        height: 60px;
        line-height: 60px;
    }

    .navbar-right {
        display: inline-block;
        position: absolute;
        right: 35px;
        height: 60px;
        text-align: center;
        line-height: 40px;
        margin-top: 10px;
        font-size: 0;
    }

    .navbar-right .item {
        position: relative;
        width: 60px;
        height: 40px;
        display: inline-block;
        color: #fff;
        font-size: 26px;
    }

    .navbar-right .item a {
        color: #fff;
    }

    .navbar-right .item .bubble {
        position: absolute;
        right: 10px;
        top: 4px;
        width: 20px;
        height: 20px;
        line-height: 1.4;
        font-size: 14px;
        background: #ff0000;
        color: #fff;
        border-radius: 50%;
    }

    .user-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        vertical-align: middle;
    }

    .el-icon-caret-bottom {
        position: absolute;
        right: 0;
        top: 32px;
        font-size: 12px;
        transform: rotate(-45deg);
    }

</style>
